<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器之层级选择器</title>
    <script src="D:\TempFiles\IntellijIdea\Pisum\SimpleWeb\src\main\webapps\libs\jquery-1.11.3.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css">
    <!--<style>-->
    <!--.left,-->
    <!--.right {-->
    <!--width: 300px;-->
    <!--height: 120px;-->
    <!--}-->
    <!--.left div,-->
    <!--.right div {-->
    <!--width: 100px;-->
    <!--height: 90px;-->
    <!--padding: 5px;-->
    <!--margin: 5px;-->
    <!--float: left;-->
    <!--background: #bbffaa;-->
    <!--border: 1px solid #ccc;-->
    <!--}-->
    <!--</style>-->
</head>
<body>
<h2>子选择器与后代选择器</h2>
<div class="left">
    <div>
        <p>div下的第一个p元素</p>
    </div>
    <div>
        <p>div下的第一个p元素</p>
    </div>
</div>
<div class="right">
    <div>
        <article>
            <p>div下的article下的p元素</p>
        </article>
    </div>
    <div>
        <article>
            <p>div下的article下的p元素</p>
        </article>
    </div>
</div>


<script type="text/javascript">
    //子选择器
    var $pson = $('div>p');
    $pson.css("border", "1px dotted red");
    //后代选择器
    //    var $div=$('div div');
    //    $div.css("border","2px double blue");
    //
    //    var $artson=$("div article");
    //    $artson.css("border","3px solid purple");
    //后代选择器
    var $pson = $('div p');
    $pson.css("border", "1px groove red");
</script>


<h2>相邻兄弟选择器与一般兄弟选择器</h2>
<div class="bottom">
    <div>兄弟节点div, 选择器不能向前选择</div>
    <span class="prev">选择器span元素</span>
    <div>span后第一个兄弟节点div</div>
    <div>兄弟节点div
        <div class="small">子元素div</div>
    </div>
    <span>兄弟节点span,不可选</span>
    <div>兄弟节点div</div>
</div>
<script type="text/javascript">
    //相邻兄弟选择器
    //选取prev后面的第一个的div兄弟节点
    $('.prev+div').css("border", "3px groove blue");
</script>

<script type="text/javascript">
    //一般相邻选择器
    //选取prev后面的所有的div兄弟节点
    $('.prev~div').css("border", "3px groove blue");
</script>

</body>
</html>